import React, { Component } from 'react';

import { modalError, messageError } from 'utils/feedbacks'

import { Select, Radio } from 'antd';

import { 
  Form, 
  Input, 
  Table, 
  Button, 
  Modal, 
} from 'antd';

import styles from './index.css';

const { TextArea } = Input;

const { Option } = Select;


/**
 * 白名单管理:编辑
 */
class Index extends Component {

  render() {
    const { getFieldDecorator } = this.props.form;
    const { visible } = this.props.modalState;
    const { address, remarks, status, name, KeyID, KeySecret, gmtCreate } = this.props.formState;
    return (
      <Modal
        title="编辑"
        visible={visible}
        wrapClassName={styles.choise_modal}
        closable={false}
        maskClosable={false}
        destroyOnClose={true}
        onCancel={this.formCanceledHandler}
        onOk={this.formSubmittedHandler} >
        <Form className={styles.lesson_form}>
          <Form.Item label='名称'>
            {
              getFieldDecorator('name', {
                initialValue: name,
                // 校验规则
                rules: [
                  { required: true, message: '名称不能为空' },
                ],
              })
                (
                  <Input type="text" allowClear placeholder='请输入名称' />
                )
            }
          </Form.Item>
          <Form.Item label='KeyID'>
            {
              getFieldDecorator('KeyID', {
                initialValue: KeyID,
                // 校验规则
                rules: [
                  { required: true, message: 'KeyID不能为空' },
                ],
              })
                (
                  <Input type="text" allowClear placeholder='请输入KeyID' />
                )
            }
          </Form.Item>
          <Form.Item label='KeySecret'> 
            {
              getFieldDecorator('KeySecret', {
                initialValue: KeySecret,
                // 校验规则
                rules: [
                  { required: true, message: 'KeySecret不能为空' },
                ],
              })
                (
                  <Input type="text" allowClear placeholder='请输入KeySecret' />
                )
            }
          </Form.Item>
          <Form.Item label='IP地址:'>
            {
              getFieldDecorator('address', {
                initialValue: address,
                // 禁止用户输入空格
                getValueFromEvent: event => event.target.value.replace(/[\u4e00-\u9fa5]/g,''),

                // 校验规则
                rules: [
                  { required: true, message: 'IP地址不能为空' },
                  { pattern: /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/ , message: 'IP地址格式错误'}
                ],
              })
                (
                  <Input type="text" allowClear placeholder="请输入IP地址"/>
                )
            }
          </Form.Item>
          <Form.Item label='状态'>
            {
              getFieldDecorator('status', {
                initialValue: status,
              })(
                <Select>
                  <Option value='ON'>正常</Option>
                  <Option value='OFF'>禁用</Option>
                </Select>
              )
            }
          </Form.Item>
          <Form.Item label='备注'>
            {
              getFieldDecorator('remarks', {
                initialValue: remarks,
              })(
                <TextArea rows={4} placeholder="请输入备注"/>
              )
            }
          </Form.Item>
          <Form.Item>
            {
              getFieldDecorator('gmtCreate', {
                initialValue: gmtCreate,
              })(
                <Input type="hidden" />
              )
            }
          </Form.Item>
        </Form>
        </Modal>

    )
  }

  /**
   * 关闭按钮点击事件
   */
  formCanceledHandler = () => {
    !!this.props.onCancel && this.props.onCancel();
  }

  /**
   * 数据验证成功后回调事件
   */
  formSubmittedHandler = (event) => {
    // 关闭表单的默认提交行为
    event.preventDefault();

    // 获取表单域数据
    const fieldsValue = this.props.form.getFieldsValue();
    // 整理表单数据
    const inputJSON = {};
    const { name, KeyID, address, KeySecret } = fieldsValue;
    if(name == ""){
      messageError('请输入名称!');
      return;
    }
    if(KeyID == ""){
      messageError('请输入KeyID!');
      return;
    }
    if(address == ""){
      messageError('请输入IP地址!');
      return;
    }
    if(KeySecret == ""){
      messageError('请输入KeySecret!');
      return;
    }

    // 名称
    Object.assign(inputJSON, { name })
    // KeyID
    Object.assign(inputJSON, { KeyID })
    // ip地址
    Object.assign(inputJSON, { address })
    // KeySecret
    Object.assign(inputJSON, { KeySecret })
    // 备注
    const remarks = !!fieldsValue['remarks']? fieldsValue['remarks'] : '';
    Object.assign(inputJSON, { remarks })
    // 创建时间
    const gmtCreate = !!fieldsValue['gmtCreate']? fieldsValue['gmtCreate'] : '';
    Object.assign(inputJSON, { gmtCreate })
    !!this.props.onConfirm && this.props.onConfirm(inputJSON);
  }

}

export default Form.create ({}) (Index);
